<template>
	<view>
		<!-- 使用 :class 来绑定传入的 class -->
		<view :class="[className == '' ? 'dateBtn' : className]" class="rowCenter" @click="openCalendar">{{ today }}
			<uv-icon name="arrow-right" color="#fff" size="12"></uv-icon>
		</view>
		<uv-calendars :mode="mode" ref="calendars" @confirm="confirm" />
	</view>
</template>

<script setup>
	const props = defineProps({
		mode: {
			type: String,
			default: ''
		},
		className: {
			type: String,
			default: '' // 传入 class 字符串
		},
	})

	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const instance = getCurrentInstance();
	const today = ref('');

	onMounted(() => {
		today.value = instance.proxy.getToday();
	})

	const calendars = ref(null);

	const openCalendar = () => {
		calendars.value.open()
	}

	const confirm = (e) => {
		uni.$emit('onChangeTime', e)
		console.log('日期选择：', e);
		if (e) {
			props.mode == 'range' ? today.value = `${e.range.before} - ${e.range.after}` : today.value = e.fulldate
		}
	}
</script>

<style lang="scss" scoped>
	.dateBtn {
		padding: 20rpx 30rpx;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}
</style>